<template>
  <div class="hello">
    <div class="main-wrapper">
      <!-- 视频区域 -->
      <div class="slider_type2 wow fadeInDown">
        <video class="w-100" src="https://caiduoduomall.com/image/Video/home-banner-v.mp4" controls="controls" poster="../../static/images/indeximg/ship.png"></video>
      </div>
      <!-- 占位删除会报错 -->
      <div class="container d-none">
        <div class="slide-content text-left">
          <span class="typed"> </span>
        </div>
      </div>
      <!-- 公司价值 -->
      <div class="album">
        <div class="container">
          <div class="row">
            <div class="col-lg-5 col-md-6">
              <div class="album_text_part wow fadeInLeft">
                <div class="power_heading_wrapper">
                  <h2 class="power_title">公司未来市场价值</h2>
                  <h6 class="primary-color">
                    The future market value of the company
                  </h6>
                </div>
                <div class="album_text_part_inner">
                  <p class="album_text_part_innermobile">
                    1，对室内加湿、净化室内空气，未来将打造成为室内智能生态再造系统；
                  </p>
                  <p class="album_text_part_innermobile">2，产品模块化生产；</p>
                  <p class="album_text_part_innermobile">
                    3，产品通过物联网、手机终端成为智能家居产品。
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-7 col-md-6">
              <div class="album_gallery_part wow fadeInRight">
                <img src="../../static/images/indeximg/05.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 适合用目标人群区域 -->
      <div class="section causes bg_color_1 wow fadeInUp">
        <div class="container">
          <div class="power_heading_wrapper text-center">
            <div class="power_heading_icon"></div>
            <h1 class="power_title">家庭智能化种植模式适合用目标人群</h1>
            <div class="power_title_line"></div>
          </div>
          <div class="owl-carousel owl-theme causes_carousel side_nav">
            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/01.png" alt="" />
                    <div class="power_highlight_tag">儿 童</div>
                  </div>
                  <div class="power_causes_content">
                    <h4>（未满16岁已经达到2.5亿人）</h4>
                    <p class="text-4">
                      智能果蔬种植机对家庭里的孩子来说是一个很好的
                      科普教育基地，是认识自然、培养科学兴趣的一个
                      鲜活素材，栽培体验可培养孩子们动手能力与热爱 劳动的思想。
                    </p>
                    <div class="power_progress_content">
                      <div class="power_progress_bar_back">
                        <div class="power_progress_bar" style="max-width: 20%">
                          <span class="power_progress_value">20%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="power_button_group">
                    <span class="power_button effect_1">
                      <span class="button_value">
                        << 左右滑动加载更多>>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/02.png" alt="" />
                    <div class="power_highlight_tag">上班族</div>
                  </div>
                  <div class="power_causes_content">
                    <h4>20-30岁上班族</h4>
                    <p class="text-4">
                      这类人群一般是上班族，没有时间陪伴父母，但作
                      为儿女送给父母及家里老人的生活礼物，尽一份孝
                      心，也给老人带来快乐的最佳产品。
                    </p>
                    <div class="power_progress_content">
                      <div class="power_progress_bar_back">
                        <div class="power_progress_bar" style="max-width: 15%">
                          <span class="power_progress_value">15%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="power_button_group">
                    <span class="power_button effect_1">
                      <span class="button_value">
                        << 左右滑动加载更多>>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/03.png" alt="" />
                    <div class="power_highlight_tag">城市人群</div>
                  </div>
                  <div class="power_causes_content">
                    <h4>30岁-50岁城市人群</h4>
                    <p class="text-4">
                      这类人群已经有一定的物质基础，比较注重修身养
                      性，在钢筋混凝土的高楼大厦里，把室内1㎡改造
                      成充满生机的田园景向，种植各种新鲜果蔬，四季
                      长青；对于喜欢花花草草的居民，可以将种植机打
                      造温馨蔬果园，各种不同色彩点缀其间，赏心悦目，
                      种植点养生药材，如石斛、金线莲等，既可以观赏
                      又有极高的药用价值，是保健养生首品。即美化家
                      居环境，又能起到调节空气的作用，还能即时采摘
                      食用，也能让身心得以休憩。
                    </p>
                    <div class="power_progress_content">
                      <div class="power_progress_bar_back">
                        <div class="power_progress_bar" style="max-width: 25%">
                          <span class="power_progress_value">25%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="power_button_group">
                    <span class="power_button effect_1">
                      <span class="button_value">
                        << 左右滑动加载更多>>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/04.png" alt="" />
                    <div class="power_highlight_tag">老 人</div>
                  </div>
                  <div class="power_causes_content">
                    <h4>（2020年末全国将有4亿老人）</h4>
                    <p class="text-4">
                      中国已经进入老龄化时代，老年人成为中国消费主
                      力，智能果蔬种植机更是晚年寄情怡志的好场所，
                      让时光在充满活力的植物世界中悠闲度过，对接养
                      老院也是一个比较好的方向。
                    </p>
                    <div class="power_progress_content">
                      <div class="power_progress_bar_back">
                        <div class="power_progress_bar" style="max-width: 35%">
                          <span class="power_progress_value">35%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="power_button_group">
                    <span class="power_button effect_1">
                      <span class="button_value">
                        << 左右滑动加载更多>>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!-- 公司新闻区域 -->
      <div class="section">
        <div class="container">
          <div class="power_heading_wrapper text-center">
            <h1 class="power_title ">新闻动态</h1>
            <div class="power_title_line"></div>
          </div>
          <div class="row">
            <div class="col-lg-3 col-md-6">
              <div class="power_iconbox type_2 fifth">
                <div class="power_iconbox_icon">
                  <img src="../../static/images/indeximg/xinwen1.png" alt="alt" />
                </div>
                <div class="power_iconbox_content">
                  <h5 class="power_iconbox_content-h5">
                    菜多多农业科技（宁波）有限公司
                  </h5>
                  <p class="text-6">
                    2020年10月14日下午，菜多多农业科技（宁波）有限公司董事长冉家国先生与新疆农科院乔新峰教授在“绿色种植•健康可视”战略合作发布会上正式签署战略合作协议，
                    双方就内容、渠道、运营等多领域深度合作达成一致。2020年是国家脱贫攻坚的关键一年，尤其是新冠病毒的袭扰全球，造成了广大人员为应对疫情，采取了自我隔离的的大环境下，
                    全球经济下滑严重，广大人民在关注个人防护的同时缺少心理方面的健康防护，在家里进行蔬菜种植就可以过“园艺法”帮助广大居民度过宅家期，同时健康可视化的需求受到党中央高度重视，
                    国家提出经济内循环的总体要求，从而保障国内经济和粮食安全，经过深层分析、菜多多农业科技（宁波）有限公司应运而生，公司研发智能果蔬种植机打破传统，引领潮流，
                    为“健康可视化”不懈地努力。签约仪式结束后，冉家国先生讲到：菜多多农业科技（宁波）有限公司,自2020年9月正式成立以来，公司的品牌定于“室内智能再造领域革命者”，
                    此次与新疆农科院乔老师的战略合作补齐了公司的农业技术领域的短板，为下一步公司开发智能果蔬种植机在种子、营养液及蔬菜培育方面奠定了良好的发展基础。
                    让我们大家共同期待菜多多农业科技（宁波）有限公司为“体验室内种植乐趣，打造智能生态温馨家园”这一愿景而创造辉煌地那一刻吧！
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="power_iconbox type_2 fifth">
                <div class="power_iconbox_icon">
                  <img src="../../static/images/indeximg/xinwen2.png" alt="alt" />
                </div>
                <div class="power_iconbox_content">
                  <h5 class="power_iconbox_content-h5">
                    在自己家里造一座农场是什么样的体验?
                  </h5>
                  <p class="text-6">
                    随着生活水平的不断提高，越来越多的人开始关注农产品
                    安全问题，蔬菜上的农药残留、催熟剂、膨大剂正在威胁
                    着人们的健康，无论吃到的蔬菜来自哪里，都不如自己亲
                    手种出来的吃的更放心。
                    从阳台泡沫箱种菜，到花盆种菜，似乎“没有什么能够阻
                    挡中国人对种菜的向往”。用科技还原绿色，智能型种菜
                    机应运而生。
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="power_iconbox type_2 fifth">
                <div class="power_iconbox_icon">
                  <img src="../../static/images/indeximg/xinwen3.png" alt="alt" />
                </div>
                <div class="power_iconbox_content">
                  <h5 class="power_iconbox_content-h5">
                    送上一小包种子 “园艺疗法”有惊喜
                  </h5>
                  <p class="text-6">
                    乌鲁木齐晚报全媒体讯（记者赵枫 王磊）宅家是目前疫
                    情防控的重要方式，做好个人身体防护的同时，关注心
                    理健康、做好心理“防护”同样重要。平顶山片区头宫社
                    区给宅家居民送上了一小包芽苗菜种子，通过“园艺疗法
                    ”帮助居民度过宅家期。
                    8月16日上午，记者跟随社区工作者来到了头宫社区一运
                    司家属院，为宅家居民冯伟送去了一小包芽苗菜种子。
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="power_iconbox type_2 fifth">
                <div class="power_iconbox_icon">
                  <img src="../../static/images/indeximg/xinwen4.png" alt="alt" />
                </div>
                <div class="power_iconbox_content">
                  <h5 class="power_iconbox_content-h5">
                    室内智能种菜机惊艳海南。
                  </h5>
                  <p class="text-6">
                    2020年12月18日-22日，2020中国（海南）国际热带农
                    产品冬季交易会在海南国际会展中心圆满举行。郑州麦佳
                    农业科技有限公司旗下代理商海口自耕农业科技有限公司
                    受邀参加了本次农交会，展示了“氧菜源”室内智能种菜机
                    这一创新产品，特别突展示智能循环系统、智能光照系统、
                    高纯度矿物质营养液三大黑科技，让大家体验在家亲手种
                    菜带来的绿色健康生活方式，引起了很多参展者和媒体。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 适用于场景 -->
      <div class="section causes bg_image_4 wow fadeInUp">
        <div class="container">
          <div class="power_heading_wrapper text-center">
            <div class="power_heading_icon"></div>
            <h1 class="power_title">家庭智能化种植模式多场景适用</h1>
            <div class="power_title_line"></div>
          </div>
          <div class="owl-carousel owl-theme causes_carousel side_nav">
            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/04.png" alt="" />
                  </div>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/04.png" alt="" />
                  </div>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/04.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="power_causes">
                <div class="power_causes_wrapper">
                  <div class="power_causes_image">
                    <img class="primary_img" src="../../static/images/indeximg/04.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="power_button_group">
            <a href="#" class="power_button alt effect_1">
              <span class="button_value">查看更多</span>
            </a>
          </div>
        </div>
      </div>
      <!-- 公司发展历程 -->
      <div class="main-wrapper">
        <div class="about_video">
          <div class="container">
            <div class="power_heading_wrapper">
              <div class="row">
                <div class="col-lg-5">
                  <h1 class="power_title">公司发展历程</h1>
                </div>
              </div>
            </div>

            <div class="owl-carousel owl-theme timeline_carousel side_nav">
              <div class="item">
                <div class="power_timeline">
                  <div class="power_timeline_content">
                    <h1>2020年</h1>
                    <h4>成立菜多多农业科技（宁波）有限公司</h4>
                    <p>
                      国家提出经济内循环，集团与新疆农业大学农业水培技术学术带头人：乔新峰教
                      授达成合作意向，成立菜多多农业科技（宁波）有限公司，研发制造智能果蔬种
                      植机，为家庭智能种植领域奉献光热，为健康可视化理念努力向前。
                    </p>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="power_timeline">
                  <div class="power_timeline_content">
                    <h1>2018年</h1>
                    <h4>瓶装饮用水生产线1条，年产2000万瓶</h4>
                    <p>
                      国家一带一路发展规划，倡导优质企业走出国门，考研后，针对东南亚沿岸国家
                      的发展情况，战略布局了房地产、酒店、娱乐业及健康饮水行业。截止2019年末
                      · 酒店及公寓面积已超10万平； ·
                      瓶装饮用水生产线1条，年产2000万瓶。
                    </p>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="power_timeline">
                  <div class="power_timeline_content">
                    <h1>2016年</h1>
                    <h4>被评 为“中国大健康产业500强”企业称号</h4>
                    <p>
                      国家提倡大健康产业的战略，集团开发系列大健康产业产品，并再获殊荣，被评
                      为“中国大健康产业500强”企业称号。
                    </p>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="power_timeline">
                  <div class="power_timeline_content">
                    <h1>2006年</h1>
                    <h4>相继成为 · 国家水处理行业委员会常务理事单位</h4>
                    <p>
                      响应国家可持续发展战略投身于环保节能净水行业，相继成为 ·
                      国家水处理行业委员会常务理事单位 ·
                      国家节能减排及系统化的标准工作组成员单位 · 中国AAA级企业
                    </p>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="power_timeline">
                  <div class="power_timeline_content">
                    <h1>2001年</h1>
                    <h4></h4>
                    <p>集团前身从事电力设备、五金电器销售公司</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    $(".causes_carousel").owlCarousel({
      items: 3,
      loop: true,
      margin: 30,
      autoplay: false,
      dots: false,
      nav: true,
      navText: [
        '<i class="ion-ios-arrow-back"></i>',
        '<i class="ion-ios-arrow-forward"></i>',
      ],
      center: false,
      responsiveClass: true,
      responsive: {
        0: { items: 1, nav: false, dots: true },
        768: { items: 2, nav: false, dots: true },
        992: { items: 2, nav: true, dots: false },
        1200: { items: 3, nav: true, dots: false },
      },
    });
    // Timeline Carousel
    $(".timeline_carousel").owlCarousel({
      items: 3,
      loop: true,
      margin: 0,
      autoplay: true,
      autoplayTimeout: 5000,
      dots: false,
      nav: true,
      navText: [
        '<i class="ion-ios-arrow-back"></i>',
        '<i class="ion-ios-arrow-forward"></i>',
      ],
      center: false,
      responsiveClass: true,
      responsive: {
        0: {
          items: 1,
          nav: false,
          dots: true,
        },
        768: {
          items: 2,
          nav: false,
          dots: true,
        },
        992: {
          items: 2,
          nav: true,
          dots: false,
        },
        1200: {
          items: 3,
          nav: true,
          dots: false,
        },
      },
    });
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.d-none {
  display: none;
}
.text-6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.text-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  /* <!-- 公司价值 --> */
  .album_text_part_innermobile {
    margin-top: 10px !important;
  }
  .primary-color {
    margin-top: 10px !important;
  }
  .power_heading_wrapper {
    margin-bottom: 20px !important;
  }
  .album {
    padding: 30px 0 !important;
  }
  /* <!-- 适合用目标人群区域 --> */
  .owl-dots {
    margin-top: 0 !important;
  }
  .causes {
    padding-bottom: 30px !important;
  }
  /* 公司新闻 */
  .power_iconbox_content-h5 {
    margin: 10px 0 !important;
  }
  .power_iconbox {
    margin-bottom: 15px;
  }
  /* 适用场景 */
  .section {
    padding: 30px 0 !important;
  }
  /* 公司发展历程 */
  .timeline_carousel {
    margin-top: 0px !important;
  }
  .about_video {
    padding: 30px 0 !important;
  }
  /* 底部导航 */
  .widget-title {
    margin-bottom: 10px !important;
  }
}
@media only screen and (max-width: 480px) {
}
</style>
